<template>
  <div>
    <div class="search">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />
    </div>
    <div class="search-content" ref="search" v-show="keyword">
        <ul>
          <li class="search-item" v-for="item of list" @click="handleCityClick(item.name)">{{item.name}}</li>
          <li class="search-item" v-show="HasNoData">
            没有找到数据
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  export default  {
    name: 'CitySearch',
    data()  {
      return  {
        keyword:'',
        list: [],
        timer: null
      }
    },
    props:  {
      cities: Object,
      },
    methods:{
           handleCityClick( city) {
        //this.$store.dispatch('changeCity',city)
        //改用commit方法
        this.$store.commit('changeCity',city)
        //alert(city)
        this.$router.push('/')
      }
    },
    computed: {
      HasNoData() {
        return !this.list.length
      }
    },
    watch:  {
      keyword() {
        if  (this.timer){
          clearTimeout(this.timer)
        }
        if (!this.keyword){
          this.list = []
          return
        }
        this.timer = setTimeout(()=>{
          const result = []
          for  (let i in this.cities){
            this.cities[i].forEach((value)=>{
              if(value.spell.indexOf(this.keyword)> -1 || value.name.indexOf(this.keyword) > -1){
                  result.push(value)
              }
            })
          }
          this.list = result
        },100)
      }
    },
      mounted(){
        this.scroll = new BScroll(this.$refs.search)
      }

  }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .search
    padding:.1rem
    box-sizing :border-box
    background :$bgColor
    .search-input
      height:.62rem
      width:100%
      text-align :center
      border-radius :.06rem
      padding:.2rem
      box-sizing :border-box
      color:#666
  .search-content
    overflow :hidden
    z-index :1
    position :absolute
    top:1.68rem
    left:0
    right:0
    bottom:0
    background #fff
    .search-item
      line-height .62rem
      padding-left:.2rem
      color:#666666
      background :#fff
      border-bottom :.02rem solid #ccc
</style>
